<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>网页打字机</title>
    <script type="text/javascript">
        let T,S;

        function print() {
            document.getElementById("con").innerHTML += "哈";
            T = setTimeout(print, 10);  // 一次性执行
        }

        function function1() {
            print();
        }

        function function2() {
            clearTimeout(T);
        }
        
        function function3(){
            S=setInterval(function (){
                document.getElementById("con").innerHTML += "o";
            },10)   // 周期性执行
        }
        
        function function4(){
            clearInterval(S);
        }
    </script>
</head>
<body>
<button onclick="function1()">开始</button>
<button onclick="function2()">停止</button>
<hr>
<button onclick="function3()">开始</button>
<button onclick="function4()">停止</button>
<div id="con"></div>
</body>
</html>